import { useState } from "react";

import "./index.scss";

export default function FormWave() {
  const [userInfo, setUserInfo] = useState({
    account: "",
    password: "",
  });

  return (
    <div className='form-wave'>
      <div className='fw-form'>
        <h1>Please Login</h1>
        <form>
          <div className='fwf-account'>
            <input
              type='text'
              value={userInfo.account}
              required
              onChange={e =>
                setUserInfo({ ...userInfo, account: e.target.value })
              }
            />
            <label>
              {"account".split("").map((item, index) => (
                <span
                  key={index}
                  style={{ transitionDelay: `${index * 50}ms` }}
                >
                  {item}
                </span>
              ))}
            </label>
          </div>
          <div className='fwf-password'>
            <input
              type='password'
              value={userInfo.password}
              required
              onChange={e =>
                setUserInfo({ ...userInfo, password: e.target.value })
              }
            />
            <label>
              {"password".split("").map((item, index) => (
                <span
                  key={index}
                  style={{ transitionDelay: `${index * 50}ms` }}
                >
                  {item}
                </span>
              ))}
            </label>
          </div>
          <button>登陆</button>
          <p>
            Don't have an account? <a href='#'>Register</a>
          </p>
        </form>
      </div>
    </div>
  );
}
